<template>
    <div class="list" ref="wrapper">
        <div>
            <div class="area">
                <div class="title border-topbottom">当前城市</div>
                <div class="button-list">
                    <div class="button-wrapper">
                        <div class="button">{{this.currentCity}}</div>
                    </div>
                </div>
            </div>
            <div class="area">
                <div class="title border-topbottom">热门城市</div>
                <div class="button-list">
                    <div class="button-wrapper" 
                    v-for="item in hotCities " 
                    :key="item.id"
                    @click="clickCity(item.name)">
                        <div class="button">{{item.name}}</div>
                    </div>
                </div>
            </div>
            <div 
                class="area" 
                v-for="(item,key) of cities" 
                :key="key"
                :ref="key"
                >
                <div class="title border-topbottom">{{key}}</div>
                <div class="item-list" v-for="innerItem in item" :key="innerItem.id">
                    <div class="item "
                    @click="clickCity(innerItem.name)">{{innerItem.name}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Bscroll from 'better-scroll'
import { mapMutations,mapState } from 'vuex'
export default {
    name : 'list',
    computed : {
        ...mapState({
            currentCity : 'city'
        })
    },
    props:
        { cities : Object,
        hotCities : Array,
        letter : String
        },
    methods:{
        clickCity(city){
            //this.$store.commit('changeCity',city)
            this.changeCity(city)
            //组件使用dispatch触发一个叫changeCity的actions，并传递参数city，actions在Store中定义
            this.$router.push('/')
            //点击后跳转到首页
        },
        ...mapMutations(['changeCity'])//将mutation中的change映射到changeCity方法中
    },
    watch: {
        letter(){
         if(this.letter){
             const element =this.$refs[this.letter][0]
             this.scroll.scrollToElement(element)//element不能是数组，而是一个对应的元素

         }
        // console.log(this.letter)//实例的方法中需要使用this.letter来调用data和props中的数据
        }
    },
      mounted(){
        this.scroll = new Bscroll(this.$refs.wrapper)
    },
}
</script>

<style lang="stylus" scoped>

  .border-bottom
    &:before
      border-color: #ccc
.list
    overflow hidden
    position absolute//列表定位布局，采用第三方滚动插件，实现原生app拖动效果
    top 5.1rem
    left 0
    right 0
    bottom 0
    background white
    .title
        line-height 2.2rem
        background #eee
        padding-left .8rem
        padding-top .1rem
        color #666
        font-size 14px
        height 2.2rem
    .button-list
        overflow hidden
        padding .1rem 1.4rem .1rem .2rem
        .button-wrapper
            width 25%
            float left
            .button
                line-height 2rem
                height 2rem
                margin .4rem
                border .04rem solid #eee
                text-align center
                border-radius .1rem
                color #333
                font-size 14px
    .item-list
        .item
            line-height 2.4rem
            color #666
            padding-left .8rem
            font-size 14px
            border-bottom 1px solid #eee
</style>
